<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<App />
		</div>
		<script src="../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let Header = {
				template: '<div>{{name}}</div>',
				props: ['type'],
				data(){
					return {
						name: '头部组件信息'
					}
				},
				created(){
					console.log(this.type)
				}
			}
			//声明入口组件
			let App = {
				data(){
					return {
						name: '入口组件信息',
						type: 'success'
					}
				},
				template: `
				<div>
					<Header :type="type" />
				</div>`,
				components: {
					Header
				},
				
			}
			let vm = new Vue({
				el: '#app',
				data(){
					return {
						value: 'vue实例的信息'
					}
				},
				//挂载子组件
				components: {
					App,
				},
			})
		</script>
	</body>
</html>
